<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>设置信息</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/public.css" />
    <style>
        html,
        body {
            background-color: #ededed;
        }

        .list-item {
            margin-top: 1px;
            padding: 15px 10px;
            font-size: 14px;
            line-height: 180%;
            position: relative;
            background-color: #fff;
        }

        .list-item:after {
            content: "  ";
            position: absolute;
            left: 0;
            top: 0;
            width: 200%;
            height: 200%;
            border-bottom: 1px solid #d4d4d4;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scale(.5, .5);
            transform: scale(.5, .5);
        }

        .list-item .title {
            padding: 0px 10px;
            font-size: 12px;
            line-height: 220%;
            color: #666;
        }

        .list-item .right {
            position: relative;
            z-index: 33;
        }

        .list-item .right .state {
            display: inline-block;
            vertical-align: middle;
            border-radius: 20px;
            width: 38px;
            height: 21px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #fff;
        }

        .list-item .right .open {
            background-color: #00acff;
        }

        .list-item .right .open::after {
            content: " ";
            float: right;
            margin-top: 1px;
            margin-right: 1px;
            width: 19px;
            height: 19px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0px 0px 1px 1px #d4d4d4;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }

        .list-item .right .close {
            background-color: #ededed;
        }

        .list-item .right .close::after {
            content: " ";
            float: left;
            margin-top: 1px;
            margin-left: 1px;
            width: 19px;
            height: 19px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0px 0px 1px 1px #d4d4d4;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }

        .list-footer {
            text-align: center;
            margin-top: 10px;
            padding: 10px;
        }

        .list-footer .btn {
            height: 40px;
            line-height: 40px;
            color: #fff;
            border-radius: 5px;
            background-color: #00acff;
        }
    </style>
</head>

<body>
    <div id="rootlist" class="list" v-cloak>
        <transition v-for="(lists,index) in list">
            <div class="list-item flex-wrap" @click="fnOpenWin(list.id,list.name);" v-if="list.id==0||list.id==1">
                <div class="left">{{lists.name}}</div>
                <div class="title flex-con"></div>
                <div class="right" v-if="lists.displays==1" @click="fnSwitch(index);">
                    <div class="state" :class="fnBarType(lists.state)"></div>
                </div>
            </div>
            <div class="list-item flex-wrap" v-else>
                <div class="left">{{lists.name}}</div>
                <div class="title flex-con"></div>
                <div class="right" v-if="lists.displays==1" @click="fnSwitch(index);">
                    <div class="state" :class="fnBarType(lists.state)"></div>
                </div>
            </div>
        </transition>
        <div class="list-footer" v-if="list.length>0">
            <div class="btn" @click="fnSignOut();">退出登录（<span>{{user}}</span>）</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<!-- 消除移动端点击延迟300ms -->
<script type="text/javascript" src="../script/fastclick.js"></script>
<!-- 公共js -->
<script type="text/javascript" src="../script/common.js"></script>
<!-- 环信接口 -->
<script type="text/javascript" src="../script/easeChat.js"></script>
<!-- sha1加密 -->
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript">
    apiready = function() {
        fnInitVue();
    };

    function fnInitVue() {
        window.rootVue = new Vue({
            el: '#rootlist',
            data: {
                list: [],
                user: '',
            },
            mounted: function() {
                this.$nextTick(function() {
                    fnInit();
                    fnRequest();
                });
            },
            methods: {
                // 开关状态
                fnSwitch: function(index) {
                    if (this.list[index].state) {
                        this.list[index].state = false;
                    } else {
                        this.list[index].state = true;
                    }
                },
                // 根据true false显示不同按钮状态
                fnBarType: function(type) {
                    if (type == true) return 'open';
                    if (type == false) return 'close';
                },
                // 退出登录
                fnSignOut: function() {
                    fnSignOuts();
                }
            }
        })
    }

    function fnInit() {
        window.rootVue.user = $api.getStorage('user');
    }

    function fnRequest() {
        window.rootVue.list = [{
            "id": 0,
            "name": "个人资料",
            "displays": 0
        }, {
            "id": 1,
            "name": "通讯录黑名单",
            "displays": 0
        }, {
            "id": 2,
            "name": "接收新消息通知",
            "displays": 1,
            "state": false

        }, {
            "id": 3,
            "name": "声音",
            "displays": 1,
            "state": false,
        }, {
            "id": 4,
            "name": "震动",
            "displays": 1,
            "state": false,
        }]
    }


    function fnSignOuts(){
        showLoading();
        // 获取最新时间
        var now = Date.now();
        // appKey加密方式   A6097706885345你自己创建的app里面的id C55DBB45-AF8B-E0D4-F692-A9E2EE0DA6E6 app的appKey 这俩个字段在开发控制台里面概览
        var appKey = SHA1("A6097706885345" + "UZ" + "C55DBB45-AF8B-E0D4-F692-A9E2EE0DA6E6" + "UZ" + now) + "." + now;
        api.ajax({
            url: 'https://d.apicloud.com/mcm/api/user/logout',
            method: 'POST',
            headers: {
                "X-APICloud-AppId": "A6097706885345",
                "X-APICloud-AppKey": appKey,
                "authorization": $api.getStorage('token')
            }
        }, function(ret, err) {
            if (ret) {
                // 调取环信退出接口
                fnLogout();
            } else {
                hideLoading();
                toast('公共卫生:退出失败请稍后再试', 3000);
            }
        });
    }
</script>

</html>
